<template>
  <div class="hospitail-detail">
    <div class="block__error-message" v-if="orderDetail.errorMessage && activeStatus === 0">
      <span>订单异常：</span>
      <p>
        {{orderDetail.errorMessage}}
      </p>
    </div>
<!--    <div class="block">-->
<!--      <header>-->
<!--        <h2>订单流程</h2>-->
<!--      </header>-->
<!--      &lt;!&ndash; 订单状态集 &ndash;&gt;-->
<!--      <section>-->
<!--        <el-steps class="hospitail-detail&#45;&#45;step" :active="activeStatus" align-center>-->
<!--          <el-step :description="item.time" :title="item.title" v-for="(item, index) in stepList" :key="index" :class="{'is-first': index === 0, 'is-last': index === stepList.length - 1}">-->
<!--            <div slot="icon" class="el-icon&#45;&#45;active__custom">-->
<!--              <div class="step&#45;&#45;img">-->
<!--                <img :src="item.status === '1' ? item.finishSrc : item.waitSrc" alt="">-->
<!--              </div>-->
<!--            </div>-->
<!--            <div slot="title" class="el-icon&#45;&#45;active__custom">-->
<!--              <span>{{ item.name }}</span>-->
<!--              <div v-if="activeStatus === index && item.next" class="step&#45;&#45;next&#45;&#45;step">-->
<!--                {{item.next}}-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-step>-->
<!--        </el-steps>-->
<!--      </section>-->
<!--      &lt;!&ndash; 订单操作记录 &ndash;&gt;-->
<!--      <section class="hospitail-detail&#45;&#45;step__vertical" >-->
<!--        <div class="hospitail-detail&#45;&#45;text">-->
<!--          <img :src="activeTimeImg" alt="">-->
<!--          <span>当前状态：</span>-->
<!--          <span>{{orderDetail.orderStatusName}}</span>-->
<!--        </div>-->
<!--        <el-timeline reverse>-->
<!--          <el-timeline-item v-for="(item, index) in timeList" :key="index" :timestamp="item.receiveTime" placement="top" :class="{'big-dot': item.type === '2', 'time&#45;&#45;last': index === timeList.length - 1}">-->
<!--            {{ item.remark }}-->
<!--            <div class="custom-dot" v-if="index === timeList.length - 1" slot="dot">-->
<!--              <img :src="lastTimeDot" alt="">-->
<!--            </div>-->
<!--          </el-timeline-item>-->
<!--        </el-timeline>-->
<!--      </section>-->
<!--    </div>-->
    <div class="block">
      <header>
        <h2>订单信息</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="8">
            <span>订单编号：</span>
            <span>{{ orderDetail.orderCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>订单状态：</span>
            <span>{{ orderDetail.orderStatusName }}</span>
          </el-col>
          <el-col :span="8">
            <span>订单类型：</span>
            <span>{{ orderDetail.orderTypeName ? orderDetail.orderTypeName : '' }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="80">
          <el-col :span="8">
            <span>供应商：</span>
            <span>{{ supplierVo.vendorName }}</span>
          </el-col>
          <el-col :span="8">
            <span>医院：</span>
            <span>{{ orderDetail.hospitalName ? orderDetail.hospitalName : '' }}</span>
          </el-col>
          <el-col :span="8">
            <span>渠道：</span>
<!--            <span>{{ orderDetail.channelTypeName || '' }}</span>-->
            <span>缺省</span>
          </el-col>
          <el-col :span="8">
            <span>下单时间：</span>
            <span>{{ orderDetail.orderDateTime}}</span>
          </el-col>
          <el-col :span="8">
            <span>下单人：</span>
            <span>{{ orderDetail.commitUser ? orderDetail.commitUser : '' }}</span>
          </el-col>
          <el-col :span="8">
            <span>备注信息：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="orderDetail.remark ? orderDetail.remark : ''"
              placement="top"
            >
              <span>{{ orderDetail.remark ? orderDetail.remark : '' }}</span>
            </el-tooltip>
          </el-col>
        </el-row>
<!--        <el-row :gutter="80">-->
<!--          &lt;!&ndash; 有字段时展示，否则隐藏  &ndash;&gt;-->
<!--          <el-col v-if="orderDetail.closeCount != 0" :span="8">-->
<!--            关闭数量-->
<!--            <span>{{ orderDetail.closeCount ? orderDetail.closeCount : '' }}</span>-->
<!--          </el-col>-->
<!--          <el-col v-if="orderDetail.closeCount != 0" :span="8">-->
<!--            退款金额-->
<!--            <span>{{ orderDetail.refundAmount ? orderDetail.refundAmount : '' }}</span>-->
<!--          </el-col>-->
<!--          <el-col v-if="orderDetail.cancelCount != 0" :span="8">-->
<!--            取消数量-->
<!--            <span>{{ orderDetail.cancelCount ? orderDetail.cancelCount : '' }}</span>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row :gutter="80">-->
<!--          <el-col :span="12" v-if="orderDetail.orderCodeRelate" style="color:red;">-->
<!--            关联采购单号-->
<!--            <span>{{ orderDetail.orderCodeRelate ? orderDetail.orderCodeRelate : '' }}</span>-->
<!--          </el-col>-->
<!--          <el-col :span="12" v-if="orderDetail.orderCodeReturn" style="color:red;">-->
<!--            关联退货单号-->
<!--            <span>{{ orderDetail.orderCodeReturn ? orderDetail.orderCodeReturn : '' }}</span>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </section>
    </div>
    <div class="block">
      <header>
        <h2>收货人信息</h2>
      </header>
      <section>
        <el-row>
          <el-col :span="4">
            <span>收货联系人：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="addressResDto.userName"
              placement="top">
              <span>{{ addressResDto.userName }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="6">
            <span>联系电话：</span>
            <span>{{ addressResDto.userPhone }}</span>
          </el-col>
          <el-col :span="14">
            <span>收货地址：</span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                addressResDto.province
                  ? `${addressResDto.province}${addressResDto.city}${addressResDto.area}${addressResDto.detailedAddress}`
                  : ''
              "
              placement="top"
            >
              <span
                >{{ addressResDto.province }}{{ addressResDto.city }}{{ addressResDto.area
                }}{{ addressResDto.detailedAddress }}</span
              >
            </el-tooltip>
          </el-col>
          <el-col :span="8">
            <span>承运方式：</span>
            <span>{{ orderDetail.transportTypeName }}</span>
          </el-col>
        </el-row>
      </section>
    </div>

    <!-- 附加信息--不要了 -->
    <!-- <div class="block">
      <header>
        <h2>附加信息</h2>
      </header>
      <section>
        <p v-if="orderAppendPOS.length === 0" style="color:#999999">
          暂无信息
        </p>
        <el-row v-else :gutter="80">
          <el-col v-for="(item, index) in orderAppendPOS" :key="index" :span="8">
            {{ item.attributeName }}
            <span>{{ item.attributeValue ? item.attributeValue : '' }}</span>
          </el-col>
        </el-row>
      </section>
    </div> -->
    <div class="block">
      <header>
        <h2>订单产品信息</h2>
      </header>
      <section>
        <div class="block__pruduct-count">
          产品总数量：<span>{{orderDetail.productCount}}</span>
        </div>
        <el-editable
          v-if="!showTableLock"
          v-loading="tableLoading"
          ref="productTable"
          height="400"
          :columns="COLUMNS"
          :data="payload.content"
          :row-class-name="tableRowClassName"
          :payload="payload"
          :need-pagination="true"
          @reload="reloadProductData"
        >
<!--          <template slot="header-referencePrice" slot-scope="{column}">-->
<!--            <span>-->
<!--              {{orderDetail.orderStatus && ['1', '2', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}-->
<!--            </span>-->
<!--          </template>-->
          <template v-if="(orderDetail.orderStatus === 2 || orderDetail.orderStatus === 8) && orderDetail.busModel === '57'"
                    slot="default-opt" slot-scope="{ row, $index }">
            <a v-if="!row.dataSources" href="javascript:;" @click="openSerialNumber(row)">序列号</a>
          </template>
          <!-- <template slot="header-confirmCount" slot-scope="{column}">
            <span>
              {{orderDetail.orderStatus && ['1', '2', '5', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}
            </span>
          </template> -->
        </el-editable>
      </section>
    </div>
<!--    <div class="block" v-if="activeStatus === 3">-->
    <div class="block" v-if="orderDetail.busModel === '57'">
      <header>
        <h2 class="required">消耗依据</h2>
      </header>
      <section>
        <el-editable
          :columns="FILE_COLUMNS"
          :payload="filePayload"
          :height="300"
        >
          <template slot="default-index" slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
          <template slot="default-fileUrl" slot-scope="scope">
            <TableUpload
              :imgname="scope.row.fileName"
              :imgsrc="scope.row.fileUrl"
              :keystr="scope.$index"
            />
          </template>
        </el-editable>
      </section>
    </div>
    <div class="block" v-if="orderDetail.busModel === '57' && orderDetail.orderStatus === 7 ">
      <header>
        <h2>原消耗单产品信息</h2>
      </header>
      <section>
        <el-editable
          v-if="!showTableLock"
          v-loading="consumeTableLoading"
          height="400"
          :columns="CONSUME_COLUMNS"
          :data="consumePayload.content"
          :row-class-name="tableRowClassName"
          :payload="consumePayload"
          :need-pagination="true"
          @reload="reloadConsumeProductData"
        >
<!--          <template slot="header-referencePrice" slot-scope="{column}">-->
<!--            <span>-->
<!--              {{orderDetail.orderStatus && ['1', '2', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}-->
<!--            </span>-->
<!--          </template>-->
          <template v-if="orderDetail.busModel === '57' && orderDetail.orderStatus === 7"
                    slot="default-opt"
                    slot-scope="{ row, $index }">
            <a href="javascript:;" @click="openSerialNumber(row)">序列号</a>
          </template>
          <!-- <template slot="header-confirmCount" slot-scope="{column}">
            <span>
              {{orderDetail.orderStatus && ['1', '2', '5', '8'].includes(orderDetail.orderStatus.toString()) ? column.label.split(',')[0] : column.label.split(',')[1]}}
            </span>
          </template> -->
        </el-editable>
      </section>
    </div>
    <div v-if="cancelContent.length > 0" class="block">
      <header>
        <h2>关闭未交产品({{orderDetail.closeCount}})</h2>
      </header>
      <section>
        <el-editable
          v-loading="cancelTableLoading"
          height="400"
          :columns="CANCEL_COLUMNS"
          stripe
          :data="cancelPayload.content"
          :payload="cancelPayload"
          :need-pagination="true"
          @reload="cancelReloadProductData"
        />
      </section>
    </div>
<!--    <div class="block">-->
<!--      <header>-->
<!--        <h2>明细</h2>-->
<!--      </header>-->
<!--      <section class="orderTab">-->
<!--        <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--          <el-tab-pane label="库存配位" name="first">-->
<!--            <el-editable-->
<!--              v-if="stockBatchData.length > 0"-->
<!--              height="400"-->
<!--              :data="stockBatchData"-->
<!--              :columns="DELIVERY_ORDER_COLUMNS"-->
<!--              stripe-->
<!--            />-->
<!--            <h3 v-else style="color:#999999;margin:100px 200px;">-->
<!--              暂无信息-->
<!--            </h3>-->
<!--          </el-tab-pane>-->
<!--          &lt;!&ndash; <el-tab-pane label="支付信息" name="second">-->
<!--            <el-editable-->
<!--              v-if="payDetailData.length > 0"-->
<!--              height="400"-->
<!--              :data="payDetailData"-->
<!--              :columns="PAY_INFO"-->
<!--              stripe-->
<!--            />-->
<!--            <h3 v-else style="color:#999999;margin:100px 200px;">-->
<!--              暂无信息-->
<!--            </h3>-->
<!--          </el-tab-pane> &ndash;&gt;-->
<!--          <el-tab-pane label="配送信息" name="third">-->
<!--            <el-editable-->
<!--              v-if="logisticsData.length > 0"-->
<!--              height="400"-->
<!--              :data="logisticsData"-->
<!--              :columns="SHIPPING_INFORMATION"-->
<!--              stripe-->
<!--            />-->
<!--            <h3 v-else style="color:#999999;margin:100px 200px;">-->
<!--              暂无信息-->
<!--            </h3>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="收货信息" name="fourth">-->
<!--            <el-editable-->
<!--              v-if="order_tab.length > 0"-->
<!--              height="400"-->
<!--              :columns="RECEIVE_COORDINATION"-->
<!--              :data="order_tab"-->
<!--              stripe-->
<!--            >-->
<!--              <template slot="default-action" slot-scope="scope">-->
<!--                <el-button type="text" @click="showLog(scope.row)">-->
<!--                  详情-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-editable>-->
<!--            <h3 v-else style="color:#999999;margin:100px 200px;">-->
<!--              暂无信息-->
<!--            </h3>-->
<!--          </el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </section>-->
<!--    </div>-->

    <el-dialog title="详情" :modal="true" custom-class="dialog-custom" :visible.sync="dialogVisible" width="70%">
      <el-editable
        :data="serial_number.content"
        :loading="receivDataLoading"
        :columns="RECEIVE_COLUMNS"
        :payload="serial_number"
        :need-pagination="true"
        stripe
        height="400"
        @reload="reloadReceiv"
      />
    </el-dialog>
<!--    序列号-->
    <el-dialog
      title="序列号"
      :visible.sync="codeDialogVisible"
      width="45%"
    >
      <div style="height: 400px;">
        <el-editable v-if="codeDialogVisible" :columns="ACCESSORIES_COLUMNS" :payload="serial_number" :height="100">
          <template slot="default-index" slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
          <template v-slot:default-snCode="{ row }">
            <div>
              <el-input
                v-model="row.snCode"
                oninput="value=value.replace(/[^\d]/g,'')"
                size="small"
                :disabled="orderDetail.orderStatus === 8"
                :minlength="1"
                :maxlength="30"
                placeholder="请输入序列号"
              />
            </div>
          </template>
          <template v-slot:default-productCount="{ row }">
            <div>
              <el-input
                v-model="row.productCount"
                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                size="small"
                placeholder="请输入数量"
                :maxlength="30"
                :disabled="orderDetail.orderStatus === 8"
                :minlength="1"
              />
            </div>
          </template>
          <template slot="default-ops" slot-scope="scope" v-if="orderDetail.orderStatus !== 8">
            <el-button type="text" @click="removeCurOtherItem(scope)">
              删除
            </el-button>
          </template>
        </el-editable>
      </div>
      <el-link v-if="orderDetail.orderStatus !== 8" type="primary" :underline="false" @click="addSerialNumber">
        添加序列号
      </el-link>
      <span slot="footer" class="dialog-footer">
        <el-button @click="codeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveSerialNumber">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
<style>
  .el-message-box__wrapper {
    z-index: 3000 !important;
  }
</style>
